
<template>
  <div class="container">
    <div class="body">

      <TypographyTitle>
        测试 OnlyOffice 前端模块
        <Button @click="testHandler">切换 文档编辑器 显示与否</Button>
      </TypographyTitle>

      <Row :gutter="32">
        <Col :span="8" style="padding: 1rem;">
          
          <Form 
            :model="formData" :rules="rules" 
            :labelCol="{ span: 6 }" :wrapperCol="{ span: 18 }" autocomplete="off"
            ref="formInstance"
            @finish="finishedHandler"
            @finishFailed="failedHandler"
          >
            <FormItem label="选择数据源">
              <Select @change="selectChangeHandler" :options="dataSource4Bind"></Select>

            </FormItem>

            <FormItem label="userId" name="userId">
              <Input placeholder="userId" v-model:value="formData.userId" allowClear />
            </FormItem>

            <FormItem label="userName" name="userName">
              <Input placeholder="userName" v-model:value="formData.userName" allowClear />
            </FormItem>

            <FormItem label="group" name="group">
              <Input placeholder="group" v-model:value="formData.group" allowClear />
            </FormItem>

            <FormItem label="image" name="image">
              <Input placeholder="image" v-model:value="formData.image" allowClear />
            </FormItem>

            <FormItem label="fileKey" name="fileKey">
              <Input placeholder="fileKey" v-model:value="formData.fileKey" allowClear />
            </FormItem>

            <FormItem label="fileUrl" name="fileUrl">
              <Input placeholder="fileUrl" v-model:value="formData.fileUrl" allowClear />
            </FormItem>

            <div style="display: flex; justify-content: flex-end; align-items: center;">
              <Space>
                <Button @click="resetHandler" >重置</Button>
                <Button type="primary" htmlType="submit">打开文档</Button>
                <Button type="primary" @click="show = false">关闭文档</Button>
              </Space>
            </div>
          </Form>

          <pre>{{ config }}
          </pre>


        </Col>
        <Col :span="16" class="right">
          <DocumentEditor
            v-if="show"
            :id="id"
            :documentServerUrl="documentServerUrl"
            :config="config"
          ></DocumentEditor>
          <Empty v-else></Empty>
        </Col>
      </Row>

    </div>
  </div>
</template>

<script setup lang="ts">
import {
  TypographyTitle,
  Button,
  message,
  Row,
  Col,
  Input,
  Form,
  FormItem,
  Space,
  Select,
  Empty,
} from 'ant-design-vue'
import { DocumentEditor, type IConfig } from '@onlyoffice/document-editor-vue'
import { computed, ref } from 'vue';
import { v4 as uuidv4 } from 'uuid'
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import type { DefaultOptionType, SelectValue } from 'ant-design-vue/es/select';

const show = ref<boolean>(false)
const testHandler = () => {
  message.info('测试消息')
  // show.value = !show.value
}


//////////////////////// only office ///////////////////////////
const id = 'docEditor'
const documentServerUrl = ref<string>('http://192.168.1.102:8080')
// const documentServerUrl = ref<string>('http://192.168.56.142:8080')
const config = ref<IConfig>({
  documentType: 'cell',
  document: {
    fileType: 'xlsx',
    // url: '',
    // url: 'http://192.168.1.102:8083/api/OnlyOffice/File/1',
    url: '',
    title: 'output.xlsx',
    key: '',
    permissions: {
      chat: false,
    }
  
  },
  editorConfig: {
    callbackUrl: 'http://192.168.1.102:8083/api/OnlyOffice/Callback',
    mode: 'edit',
    customization: {
      // autosave: false,
      // forcesave: true,
    },
    lang: 'zh-CN',

    user: {
      firstname: 'test-firstName',
      lastname: 'test-lastName',
      name: 'test-name',
      id: 'test-1234567890',
      group: 'test-group',
    }
  },
  height: '100%',
  
})


/////////////////////// 表单 //////////////////////////
interface FormType {
  userId: string;
  userName: string;
  group: string;
  image: string;
  fileKey: string;
  fileUrl: string;
}

const rules = ref<Record<string, Rule[]>>({
  userId: [ { required: true, message: "必须输入 `userId`" } ],
  userName: [ { required: true, message: "必须输入 `userName`" } ],
  firstName: [ { required: true, message: "必须输入 `firstName`" } ],
  lastName: [ { required: true, message: "必须输入 `lastName`" } ],
  group: [ { required: true, message: "必须输入 `group`" } ],
  // image: [ { required: true, message: "必须输入 `image`" } ],
  fileKey: [ { required: true, message: "必须输入 `fileKey`" } ],
  fileUrl: [ { required: true, message: "必须输入 `fileUrl`" } ],
})

const formData = ref<Partial<FormType>>({
  userId: undefined,
  userName: undefined,
  group: undefined,
  image: undefined,
  fileKey: undefined,
  fileUrl: undefined,
})

const formInstance = ref<FormInstance>()

const resetHandler = () => {
  
  formData.value.userId = undefined;
  formData.value.userName = undefined;
  formData.value.group = undefined;
  formData.value.image = undefined;
  formData.value.fileKey = undefined;
  formData.value.fileUrl = undefined;

  formInstance.value?.clearValidate()
}
const failedHandler = () => {
  message.error('表单验证失败')
}
const finishedHandler = () => {
  message.success('获得表单数据')

  // http://192.168.1.102:8083/api/OnlyOffice/File/1
  config.value.document.key = formData.value.fileKey as string
  config.value.document.url = formData.value.fileUrl as string

  config.value.document.title = formData.value.fileKey as string

  config.value.editorConfig!.user!.group = formData.value.group
  config.value.editorConfig!.user!.name = formData.value.userName
  config.value.editorConfig!.user!.id = formData.value.userId
  

  show.value = true

}



// 数据源
const dataSource = ref<FormType[]>([
  {  
    userId: 'userId-1',
    userName: '蒋坤-k1-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },
  {  
    userId: 'userId-2',
    userName: '李玉婷-k1-u2',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/4',
  },
  {  
    userId: 'userId-3',
    userName: '蒋子茜-k2-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-2',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },
  {  
    userId: 'userId-4',
    userName: '张三-k1-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },
  {  
    userId: 'userId-5',
    userName: '李四-k1-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },
  {  
    userId: 'userId-6',
    userName: '王五-k1-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },
  {  
    userId: 'userId-7',
    userName: '赵倩-k1-u1',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-1',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/3',
  },

  {  
    userId: 'userId-8',
    userName: '孙俪-k2-u2',
    group: 'group1',
    image: 'image-',
    fileKey: 'fileKey-2',
    fileUrl: 'http://192.168.1.102:8083/api/OnlyOffice/File/4',
  },
])

const dataSource4Bind = computed(() => {
  return dataSource.value.map(d => ({
    label: d.userName,
    value: d.userId,
    xData: d
  }))
})

const selectChangeHandler = (v: SelectValue, opt: DefaultOptionType) => {
  console.log(v, opt)
  
  formData.value.userId = opt.xData.userId
  formData.value.userName = opt.xData.userName
  formData.value.group = opt.xData.group
  formData.value.image = opt.xData.image
  formData.value.fileKey = opt.xData.fileKey
  formData.value.fileUrl = opt.xData.fileUrl

  formInstance.value?.clearValidate()
}


</script>

<style lang="scss" scoped>
.container {
  margin: 0;
  background-color: lightgray;
  // padding: 1rem;
  width: 100vw;
  height: 100vh;
  // border: 1px dashed red;
  overflow-y: scroll;
  

  .body {
    position: relative;
    margin: 1rem;
    background-color: white;
    padding: 1rem;
    // width: 100%;
    // height: 100%;
    
    .right {
      min-height: 44rem;
      // border: 1px dashed red;
      // height: 48rem;
    }
  }
}
</style>